<template>
    <el-dialog class="personal-group-add" width="1500px" :visible.sync="personalDialogVisiable" title="添加客户" :close-on-click-modal="false">
      <ue-search-bar :data="querys" ref="ueSearchBar" v-model="groupTypeForm">
      </ue-search-bar>
      <el-col>
        <el-button type="primary" @click.native="manualAddPersonal" class="mButton">手动添加客户</el-button>
        <el-button type="primary" @click.native="resetPersonalGroupFilter1" class="mButton mButtonRight">重置</el-button>
        <el-button type="primary" @click.native="searchPersonalGroup" class="mButton mButtonRight">查询</el-button>
      </el-col>
      <el-table :data="personalGroupTableData" highlight-current-row border>
        <el-table-column type="index" label="序号" min-width="60"></el-table-column>
        <el-table-column prop="realName" label="客户名称" min-width="150"></el-table-column>
        <el-table-column prop="phone" label="联系手机" min-width="150"></el-table-column>
        <el-table-column prop="enterprise" label="企业名称" min-width="120"></el-table-column>
        <el-table-column prop="createDate" label="注册日期" min-width="120">
          <template slot-scope="scope">
            <label v-if="scope.row.createDate != null">{{scope.row.createDate.substring(0,10)}}</label>
          </template>
        </el-table-column>
        <el-table-column prop="partnerName" label="邀请人" min-width="100"></el-table-column>
        <el-table-column label="所在城市" min-width="150">
          <template slot-scope="scope">
            {{scope.row.province}}{{scope.row.city}}{{scope.row.county}}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100">
          <template slot-scope="scope">
            <el-button type="danger" @click.native="deletPersonal(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--工具条-->
      <el-row>
        <el-col :span="24" class="toolbar">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total,sizes,prev, pager, next, jumper"
            :total="total" style="float: right;">
          </el-pagination>
        </el-col>
      </el-row>
    </el-dialog>
</template>

<script>
import {deleteMebPersonalForPersonalGroup} from '../../api/v3/PersonalGroup';
import {getAllMebPersonals} from '../../api/v3/MebPersonal';
export default {
  name: 'personal-group-add',
  componentName: 'personal-group-add',
  data () {
    return {
      groupTypeForm: {},
      personalGroupTableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      filters: '',
      personalDialogVisiable: false,
      selected: null,
      selectedId: ''
    };
  },
  methods: {
    manualAddPersonal () {
      this.$emit('comfirmSuccess', true);
    },
    show (o) {
      this.personalDialogVisiable = true;
      this.selectedId = o.id;
      this.resetPersonalGroupFilter1();
      this.searchPersonalGroup();
    },
    searchPersonalGroup () {
      this.filters = 'LIKE_personalGroups.id=' + this.selectedId + ';' + this.$ue.objToFilter(this.groupTypeForm);
      this.getPersonalGroupTableData(this.filters);
    },
    getPersonalGroupTableData (val) {
      getAllMebPersonals({
        filters: val,
        page: this.currentPage - 1,
        size: this.pageSize
      }).then((res) => {
        this.personalGroupTableData = res.data;
        this.total = Number(res.headers['x-total-count']);
      });
    },
    deletPersonal (val) {
      this.$confirm('确认删除该群组用户？', '提示', {
        type: 'warning'
      }).then(() => {
        deleteMebPersonalForPersonalGroup(this.selectedId, val.id).then(res => {
          this.$message.success('删除成功');
          this.searchPersonalGroup();
        });
      });
    },
    // 重置表单
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchPersonalGroup();
    },
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchPersonalGroup();
    },
    resetPersonalGroupFilter1 () {
      if (this.$refs.ueSearchBar !== undefined) {
        this.$refs.ueSearchBar.reset();
      }
      this.filters = '';
    }
  },
  computed: {
    btns () {
      return this.$store.state.btns[this.$route.path] || [];
    },
    querys () {
      return this.$store.state.querys['/message/personalGroup#addMebPersonal'] || [];
    }
  },
  // 初始化数据
  mounted () {
    this.$store.commit('initDict');
  }
};
</script>

<style lang="less">
  personal-group-add {
    .mButton {
      margin-bottom: 10px;
    }

    .mButtonRight {
      float: right;
      margin-right: 10px;
    }
  }
</style>
